<template>
  <div>
    <van-list
      v-model:loading="state.loadings"
      :finished="state.finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
      :offset="20"
    >
      <div
        class="recom_list"
        v-for="item in state.list"
        :key="item.id"
        @click="setId(item.id)"
      >
        <div class="img">
          <img :src="item.Imgurl" alt="" />
        </div>
        <div class="title">
          <div class="title_text">
            <p class="icon"></p>
            <h4>{{ item.title }}</h4>
            <p class="text">{{ item.synopsis }}</p>
          </div>
          <div class="title_score">
            <p class="score_p">
              <img src="../../../../public/img/小星星.png" alt="" />
              <span>{{ item.score }}</span>
            </p>
            <p class="maohao">:</p>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
import { reactive } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
export default {
  setup() {
    const state = reactive({
      currentPage: 1,
      loading: false,
      loadings: false,
      finished: false,
      list: [],
    });
    const router = useRouter();
    const setId = (id) => {
      router.push("/detail/" + id);
    };
    axios
      .get("http://121.199.14.205:3000/api/list", {
        params: {
          pageSize: 2,
          currentPage: state.currentPage,
        },
      })
      .then(function (response) {
        state.list = response.data.list;
      });
    const onLoad = () => {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(async () => {
        state.loadings = false;
        // 数据全部加载完成
        if (state.list.length >= 7) {
          state.finished = true;
        }
        state.currentPage++;
        await axios
          .get("http://121.199.14.205:3000/api/list", {
            params: {
              pageSize: 2,
              currentPage: state.currentPage,
            },
          })
          .then(function (response) {
            state.list = state.list.concat(response.data.list);
          });
      }, 1000);
    };

    return {
      state,
      onLoad,
      setId,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../../assets/css/var.less";
.recom_list {
  width: 374.5px;
  padding: 8px 16px;
  // height: 266px;
  border-radius: 10px;
  height: 284px;
  .img {
    width: 342.5px;
    height: 192.5px;
    img {
      width: 100%;
      height: 100%;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
    }
  }
  .maohao {
    margin-top: 6px;
    line-height: 20px;
    font-size: 20px;
  }
  .title {
    width: 342.5px;
    margin-top: 0px;
    padding: 10px 0px;
    background-color: #ffffff;
    display: flex;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 10%);
    .title_text {
      width: 80%;
      padding-left: 15px;
      .of();
      h4 {
        margin: 10px 0px;
        font-size: 18px;
        color: #333333;
      }
      .text {
        font-size: @s-font;
        color: #999999;
        .of();
      }
    }
    .title_score {
      width: 20%;
      .score_p {
        display: flex;
        margin-top: 10px;
        img {
          width: 18px;
          height: 16.5px;
        }
        span {
          text-indent: 5px;
          font-size: 21px;
          color: #32b9ba;
          text-align: center;
          line-height: 18px;
        }
      }
      p {
        color: #cccccc;
        text-indent: 65%;
        height: 20px;
      }
    }
  }
}
</style>
